// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import babel from '@rollup/plugin-babel'
import UnoCSS from 'unocss/vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'

export function createPlugins(mode: string): any {
  return [
    vue(),
    vueJsx(),
    babel({
      babelHelpers: 'bundled',
      include: [/\.vue$/, /\.ts$/, /\.tsx$/, /.js$/],
      extensions: ['.vue', '.ts', '.js', 'tsx', 'jsx'],
      plugins: [
        '@babel/plugin-proposal-optional-chaining',
        '@babel/plugin-proposal-nullish-coalescing-operator',
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-syntax-jsx'
      ]
    }),
    AutoImport({
      imports: ['vue', 'vue-router',
        {
          '@/hooks/useMessage.ts': ['showConfirm', 'showWarning', 'showSuccess', 'showMessage', 'showError'],
        },
      ],
      //存放的位置
      dts: "src/types/auto-import.d.ts",
    }),
    Components({
      // 引入组件的,包括自定义组件
      // 存放的位置
      dts: "src/types/components.d.ts",
      resolvers: [AntDesignVueResolver({
        importStyle: false, // css in js
      }),],
      exclude: [/node_modules/],
    }),
    createSvgIconsPlugin({
      iconDirs: [resolve(process.cwd(), 'src/assets/icons/svg')],
      symbolId: 'icon-[dir]-[name]'
    }),
    UnoCSS()
  ]
}
